<style scoped>
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 24px 32px;
  margin-bottom: 32px;
  border-radius: 16px;
  color: #606266;
  font-size: 14px;
  font-weight: 600;
}

.form-item {
  width: 187px;
  margin: 0 8px;
}

.reset {
  color: #ff5d47;
}

.search-btn {
  background-color: #ff4949;
  color: #fff;
}

.active {
  background-color: #000;
  color: #fff;
}

.table {
  width: 100%;
  border-radius: 16px;
  margin: 16px 0;
}

.color-g {
  color: #19cc8e;
}

.color-r {
  color: #ff5d47;
}

.row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: #5f6a7f;
  justify-content: space-between;
}

.row span {
  color: #191c1f;
  font-size: 14px;
}
.see {
  color: #ff5d47;
}
</style>

<template>
  <div>
    <div class="search-box">
      用户ID:
      <el-input
        size="large"
        class="form-item"
        v-model="searchParam.id"
        placeholder="请输入"
      ></el-input>
      账户状态:
      <el-select
        size="large"
        class="form-item"
        v-model="searchParam.status"
        placeholder="请选择"
      >
        <el-option label="启用" value="1" />
        <el-option label="停用" value="2" />
      </el-select>
      <el-button size="large" class="reset" @click="reset" text>重置</el-button>
      <el-button size="large" class="search-btn" @click="search"
        >搜寻</el-button
      >
    </div>
    <div class="type-list">
      <el-button
        size="large"
        v-for="(item, index) in typeList"
        :key="index"
        @click="changeType(item)"
        text
        :class="[{ active: searchParam.type == item.value }]"
        >{{ item.label }}</el-button
      >
    </div>
    <el-table :data="dataList" class="table" size="large">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="userName" label="名称" />
      <el-table-column prop="email" label="邮箱地址" />
      <el-table-column prop="memberTypeDesc" label="用户等级" />
      <el-table-column prop="dateUpdate" label="最近登陆时间" />
      <el-table-column prop="name" label="账户状态">
        <template #default="scope">
          <div :class="scope.row.status == 'normal' ? `color-g` : 'color-r'">
            {{ scope.row.status == "normal" ? "启用" : "停用" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-button size="small" text @click="edit(scope.row)" class="see">
              查看
            </el-button>
            <el-icon @click="del(scope.row)">
              <Delete />
            </el-icon>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="dataTotal"
      class="mt-4"
      :page-size="pageSize"
      :current-page="page"
      @size-change="changeSize"
      @current-change="changePage"
      :page-sizes="[20, 50, 100]"
    />
    <el-dialog v-model="showEdit" title="用户详情" width="400">
      <div class="row">
        用户名称
        <span>{{ editData.userName }}</span>
      </div>
      <div class="row">
        用户电邮
        <span>{{ editData.email }}</span>
      </div>
      <div class="row">
        用户ID
        <span>{{ editData.id }}</span>
      </div>
      <div class="row">用户状态</div>
      <el-radio-group v-model="editData.status">
        <el-radio value="normal" size="large">启用</el-radio>
        <el-radio value="block" size="large">禁用</el-radio>
      </el-radio-group>
      <template #footer>
        <div>
          <el-button type="primary" @click="editing"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";

export default {
  name: "userList",
  data() {
    return {
      searchParam: {
        id: "",
        status: "",
        type: "",
      },
      typeList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "免费用户",
          value: 1,
        },
        {
          label: "付费用户",
          value: 2,
        },
        {
          label: "尊贵用户",
          value: 3,
        },
      ],
      dataList: [],
      page: 1,
      pageSize: 20,
      dataTotal: 0,
      showEdit: false,
      editData: {},
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    async del(query) {
      ElMessageBox.confirm(
        `你确定要删除用户邮箱为${query.email}的账号吗？`,
        "删除账号",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          draggable: true,
        }
      )
        .then(async () => {
          const res = await request.POST("/sys/sys_user/teacher/delete", {
            userId: query.id,
          });
          if (res.status == 100100) {
            ElMessage({
              type: "success",
              message: "删除成功",
            });
            this.getDataList();
          } else {
            ElMessage.error(res.message);
          }
        })
        .catch(() => {});
    },
    async editing() {
      const params = {
        id: this.editData.id,
        status: this.editData.status,
      };
      if (this.editData.password) {
        params.password = this.editData.password;
      }
      const loading = ElLoading.service();
      const res = await request.PUT("/sys/sys_user/teacher/change", params);
      loading.close();
      if (res.status == 100100) {
        this.getDataList();
        this.showEdit = false;
        ElMessage.success("操作成功！");
      } else {
        ElMessage.error(res.message);
      }
    },
    edit(query) {
      this.editData = { ...query };
      this.showEdit = true;
    },
    changePage(page) {
      console.log(page);
      this.page = page;
      this.getDataList();
    },
    changeSize(size) {
      console.log(size);
      this.pageSize = size;
      this.page = 1;
      this.getDataList();
    },
    changeType(query) {
      this.page = 1;
      this.searchParam.type = query.value;
      this.getDataList();
    },
    search() {
      this.page = 1;
      this.getDataList();
    },
    reset() {
      this.searchParam = {
        id: "",
        status: "",
        type: 1,
      };
      this.page = 1;
      this.getDataList();
    },
    async getDataList() {
      const loading = ElLoading.service();
      const res = await request.POST("/sys/sys_user/student/page", {
        userId: this.searchParam.id,
        pageNum: this.page,
        pageSize: this.pageSize,
        status: this.searchParam.status == 2 ? "block" : "normal",
        memberTypeId: this.searchParam.type,
      });
      loading.close();
      if (res.status == 100100) {
        this.dataTotal = res.data.total;
        this.dataList = res.data.records;
      }
    },
  },
};
</script>
